<template>
	<view>
    <view v-if="currentTabbar == 0" class="fade-in">
      <IndexPage />
    </view>
    <!-- <view v-else-if="currentTabbar==1" class="fade-in">
      <EncryptTest  />
    </view> -->
    <view v-else-if="currentTabbar == 1" class="fade-in">
      <UserCenter ref="userCenterRef" />
    </view>

    <TnTabbar
      v-model="currentTabbar"
      fixed
      frosted
      @change="tabBarItemChange"
    >
      <TnTabbarItem
        v-for="(item, index) in tabbarData"
        :key="index"
        :icon="item.icon"
        :active-icon="item.activeIcon"
        :text="item.name"
      />
    </TnTabbar>
  </view>
</template>

<script setup>
  import { ref,reactive } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import TnTabbar from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar.vue'
  import TnTabbarItem from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar-item.vue'

  import IndexPage from './tabbar/index.vue'
  import UserCenter from './tabbar/user.vue'
  import EncryptTest from './tabbar/encryptTest.vue'

  const userCenterRef = ref(null)

  
  const currentTabbar = ref(0)  
  const tabbarData = [
    {
      name: '首页',
      icon: 'home',
      activeIcon: 'home-fill',
      page: '/pages/index/index'
    },
    // {
    //   name: '加密',
    //   icon: 'like',
    //   activeIcon: 'like-fill',
    // },
    // {
    //   name: '积分',
    //   icon: 'shop',
    //   activeIcon: 'shop-fill',
    // },
    // {
    //   name: '热谤',
    //   icon: 'fire',
    //   activeIcon: 'fire-fill',
    // },
    {
      name: '我的',
      icon: 'my-circle',
      activeIcon: 'my-circle-fill',
      page: '/pages/user/index'
    },
  ]
  
  onShow(() => {
    // console.log('onShow:', userCenterRef.value);
    if (currentTabbar.value == 1 && userCenterRef.value) {
      userCenterRef.value.userInfo()
    }
  })
  
  const tabBarItemChange = (tabIndex) => {
    console.log(tabIndex);
    currentTabbar.value = tabIndex
  }

</script>

<style>
</style>
